layui.use(['jquery','layer','element','laydate','table','laytpl'],function($,layer,element,laydate,table,laytpl){

    //================最顶上的几个圆圈的内容========================

    var data4 = null;
    $.ajax({
        url: '../../json/教室设备的小圆圈.json',
        async:false,
        success:function(res){
            data4 = res;
        }
    });

    // console.log(data4)
    var gettpl = document.getElementById('addDivTem').innerHTML;
    laytpl(gettpl).render(data4, function (html) {
        // console.log(html)
        //得到的模板渲染到html
        document.getElementById('addDiv').innerHTML = html;
    });
    //========================end==================================

    //=============右上的数据表格==============
    table.render({
        elem: '#test'
        ,url:'../../json/教室设备的数据表格.json'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
            {field:'id', title: '序号', align: 'center'}
            ,{field:'name', title: '设备名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
            ,{field:'state', title: '状态', align: 'center'}
            ,{field:'repair', title: '报修', align: 'center'}
        ]]
    });

    //监听到窗口有变化，重现将表格渲染
    $(window).resize(function(){
        table.render({
            elem: '#test'
            ,url:'../../json/教室设备的数据表格.json'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: '序号', align: 'center'}
                ,{field:'name', title: '设备名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'state', title: '状态', align: 'center'}
                ,{field:'repair', title: '报修', align: 'center'}
            ]]
        });
    });
    //==============end===========================

    //===========左上方的多条折线图======================================
    var data2 = null;
    $.ajax({
        url: '../../json/教室环境.json',
        async:false,
        success:function(res){
            data2 = res;
        }
    });

    var myChart2 = echarts.init(document.getElementById('main2'));

    var option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: data2.dataName
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data2.dataX
        },
        yAxis: {
            type: 'value'
        },
        series: data2.value
    };

    myChart2.setOption(option2);
    //=====================end================================================

    //============时间，日期组件
    laydate.render({
        elem: '#select'
        ,range: true
        ,format: 'yyyy.MM.dd'	//日期格式化
        ,done: function(value){

        }
    });
    //===========================

    //============================数据统计最底下的折线图start==================================
    var data1 = null;
    $.ajax({
        url: '../../json/教室总能耗.json',
        async:false,
        success:function(res){
            data1 = res;
        }
    });

    // console.log(data);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        color: '#0096F2',
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data1.dataX
        },
        yAxis: {
            type: 'value',
            min: data1.minY,
            max: data1.maxY,
            name: data1.nameY
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [{
            data: data1.value,
            type: 'line',
            areaStyle: {
                normal:{
                    color:new echarts.graphic.LinearGradient(0,0,0,1,[
                        {
                            offset:0,
                            color:'#0096F2'
                        },
                        {
                            offset:1,
                            color: '#FFFFFF'
                        }
                    ])
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //============================数据统计最底下的折线图end==================================

});